import { DOCUMENT } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  AfterViewInit,
  Renderer2,
  Inject,
  ViewContainerRef,
  TemplateRef
} from "@angular/core";
import { ImgStoreData } from "src/storage/.config/store.type";
import { fromEvent } from "rxjs";
import { AlbumResolveData } from 'src/app/service/router-resolve/album/album-resolve.service';
import { Store, select } from '@ngrx/store';
import { AppState, Selectors } from 'src/app/store';

@Component({
  selector: "app-album",
  templateUrl: "./album.component.html",
  styleUrls: ["./album.component.scss"]
})
export class AlbumComponent implements OnInit, AfterViewInit {
  name: string = "_";
  content: string[] = [];
  storage: ImgStoreData["data"][0] = {
    id: 0,
    name: "_",
    isEmpty: true,
    content: [],
    config: {
      name: "",
      desc: "",
      date: "",
      storage: "",
      position: ""
    }
  };
  allStorage: AlbumResolveData;
  theme: AppState[Selectors.theme]["theme"] = "primary";
  docWidth: number = this.doc.body.clientWidth;

  @ViewChild("headerImg", { static: true }) headerImg: ElementRef<
    HTMLEmbedElement
  >;

  @ViewChild("accordion", { static: true }) accordion: ElementRef<
    HTMLEmbedElement
  >;

  @ViewChild("panelContainer", { static: true, read: ViewContainerRef })
  panelContainer: ViewContainerRef;

  @ViewChild("rowContainer", { static: true, read: ViewContainerRef })
  rowContainer: ViewContainerRef;

  @ViewChild("infoListTemplate", { static: true })
  infoListTemplate: TemplateRef<HTMLElement>;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private rd2: Renderer2,
    private store$: Store<AppState>,
    @Inject(DOCUMENT) private doc: Document
  ) {
    this.route.params.subscribe(({ name }) => (this.name = name));
    this.route.data.subscribe(({ storage }) => {
      if (storage === null) {
        return this.router.navigate(["/"]);
      }
      this.allStorage = storage;
      this.storage = storage.this;
      this.name = this.storage.name;
      this.content = this.storage.content;
    });
  }
  ngAfterViewInit(): void {
    this.setPanelWidthAsImg();
  }

  ngOnInit() {
    this.toggleInfoList(this.docWidth);
    fromEvent(window, "resize").subscribe(() => {
      this.setPanelWidthAsImg();
      this.docWidth = this.doc.body.clientWidth;
      this.toggleInfoList(this.docWidth);
    });
    this.store$.pipe(select(Selectors.theme)).subscribe(({ theme }) => {
      this.theme = theme;
    });
  }

  setPanelWidthAsImg() {
    this.rd2.setStyle(
      this.accordion.nativeElement,
      "width",
      (parseInt(this.headerImg.nativeElement.width) + 10).toString() + "px"
    );
  }
  
  goToNewAlbum(album: ImgStoreData["data"][0] | null) {
    if (album === null) return;
    return this.router.navigate(["/album", album.name]);
  }

  toggleInfoList(width: number) {
    if (width <= 900) {
      this.panelContainer.clear();
      this.panelContainer.createEmbeddedView(this.infoListTemplate);
      this.rowContainer.clear();
    } else {
      this.rowContainer.clear();
      this.rowContainer.createEmbeddedView(this.infoListTemplate);
      this.panelContainer.clear();
    }
  }
}
